<template>
  <div class="u-p-t-10 u-p-b-10">
    <!-- 天辉 -->
    <div
      class="u-p-r-16 u-p-l-16 u-p-b-10 u-p-t-10 u-text-left u-font-12 u-flex u-row-between"
      style="background:#66bb6a;color:#fff;"
    >
      <div>天辉 {{ radiantWin ? "胜利" : "失败" }}</div>
      <div>
        杀敌 {{ getCountInListByKey(radiantPlayers, "kills") }} 金钱
        {{ getCountInListByKey(radiantPlayers, "gold_per_min") }} 经验
        {{ getCountInListByKey(radiantPlayers, "xp_per_min") }}
      </div>
    </div>
    <van-collapse v-model="activeNames">
      <van-collapse-item
        v-for="player in radiantPlayers"
        :key="player.player_slot"
        :name="player.player_slot"
        :is-link="false"
      >
        <template #title>
          <van-row align="center" justify="space-between">
            <van-col span="5">
              <div class="u-flex u-flex-col u-col-top u-row-center">
                <div class="u-flex u-flex-col u-col-top u-relative u-m-b-4">
                  <van-image
                    height="28"
                    width="48"
                    fit="cover"
                    :src="`${imageBaseUrl}${heroes[player.hero_id].img}`"
                  />
                  <div
                    class="u-absolute u-font-12 u-p-2"
                    style="background:#fff;top:0;right:0;opacity:.7;border-radius: 0 0 0 8px;"
                  >{{ player.level }}</div>
                </div>
                <van-tag type="primary">{{ formatRankTier(player.rank_tier) }}</van-tag>
              </div>
            </van-col>
            <van-col span="11">
              <div>
                <div class="u-line-1 u-text-left u-m-b-4">
                  <van-tag
                    class="u-m-r-2"
                    v-for="(item, index) in getTag(player.player_slot)"
                    :key="index"
                    :type="item.type"
                  >{{ item.name }}</van-tag>
                  <span class="u-type-primary u-font-12">{{ player.personaname || "匿名玩家" }}</span>
                </div>
                <van-row align="center" justify="space-between">
                  <van-col span="12">
                    <div class="u-flex u-flex-col u-col-top">
                      <div
                        class="u-font-10 u-m-b-4"
                      >参战：{{ !!player.teamfight_participation ? (player.teamfight_participation * 100).toFixed(1) + '%' : '-' }}</div>
                      <div
                        class="u-font-10"
                      >伤害： {{ getHeroDamageParticipation(player.hero_damage, true) }}%</div>
                    </div>
                  </van-col>
                  <van-col span="12">
                    <div class="u-flex u-flex-col u-col-bottom">
                      <div
                        class="u-font-12 u-m-b-4"
                      >{{ `${player.kills}/${player.deaths}/${player.assists}` }}</div>
                      <div class="u-font-10 u-tips-color">
                        KDA:{{
                          (
                            (player.kills + player.assists) /
                            (player.deaths || 1)
                          ).toFixed(1)
                        }}
                      </div>
                    </div>
                  </van-col>
                </van-row>
              </div>
            </van-col>
            <van-col span="2">
              <div class="u-flex u-flex-col u-row-center u-col-center">
                <div class="u-flex u-flex-col u-m-b-2">
                  <van-image
                    width="10"
                    height="12"
                    :src="
                      `https://www.opendota.com/assets/images/dota2/scepter_${player?.purchase?.abyssal_blade ? 1 : 0
                      }.png`
                    "
                  ></van-image>
                  <van-image
                    width="10"
                    height="8"
                    :src="
                      `https://www.opendota.com/assets/images/dota2/shard_${player?.purchase?.aghanims_shard ? 1 : 0
                      }.png`
                    "
                  ></van-image>
                </div>
                <van-image
                  class="u-m-r-2 u-m-b-2"
                  height="20"
                  width="20"
                  fit="cover"
                  round
                  :src="`${imageBaseUrl}${items[item_ids[player.item_neutral]]?.img}`"
                >
                  <template v-slot:error></template>
                </van-image>
              </div>
            </van-col>
            <van-col span="6">
              <div
                style="display: grid;grid-template-columns: repeat(3, 26px);grid-row-gap: 2px;grid-column-gap: 2px;"
              >
                <van-image
                  height="20"
                  width="26"
                  fit="cover"
                  v-for="item in [0, 1, 2, 3, 4, 5]"
                  :key="item"
                  :src="
                    `${imageBaseUrl}${items[item_ids[player[`item_${item}`]]]?.img
                    }`
                  "
                >
                  <template v-slot:error></template>
                </van-image>
              </div>
            </van-col>
          </van-row>
        </template>
        <div>
          <van-row class="u-m-b-8 u-font-12" align="center">
            <van-col span="8" class="u-flex u-row-left">英雄伤害:{{ player.hero_damage }}</van-col>
            <van-col span="8">总金钱:{{ player.net_worth }}</van-col>
            <van-col span="8" class="u-flex u-row-right">
              <div
                style="display: grid;grid-template-columns: repeat(3, 26px);grid-row-gap: 2px;grid-column-gap: 2px;"
              >
                <van-image
                  height="20"
                  width="26"
                  fit="cover"
                  v-for="item in [0, 1, 2]"
                  :key="item"
                  :src="
                    `${imageBaseUrl}${items[item_ids[player[`backpack_${item}`]]]?.img
                    }`
                  "
                >
                  <template v-slot:error></template>
                </van-image>
              </div>
            </van-col>
          </van-row>
          <van-row class="u-m-b-8 u-font-12" justify="space-between" align="center">
            <van-col span="8" class="u-flex u-row-left">GPM:{{ player.gold_per_min }}</van-col>
            <van-col span="8">建筑伤害:{{ player.tower_damage }}</van-col>
            <van-col
              span="8"
              class="u-flex u-row-right"
            >正补/反补:{{ player.last_hits }}/{{ player.denies }}</van-col>
          </van-row>
          <van-row class="u-m-b-8 u-font-12" justify="space-between" align="center">
            <van-col span="8" class="u-flex u-row-left">XPM:{{ player.xp_per_min }}</van-col>
            <van-col span="8">英雄治疗:{{ player.hero_healing }}</van-col>
            <van-col span="8" class="u-flex u-row-right">
              摧毁防御塔:{{
                player.tower_kills
              }}
            </van-col>
          </van-row>
          <div class="u-flex u-flex-wrap">
            <AbilityIcon
              v-for="(ability, index) in player.ability_upgrades_arr"
              :key="index"
              :index="index + 1"
              :ability="abilities[ability_ids[ability]]"
              :width="28"
              :height="28"
            ></AbilityIcon>
          </div>
        </div>
      </van-collapse-item>
    </van-collapse>

    <!-- 夜魇 -->
    <div
      class="u-p-r-16 u-p-l-16 u-p-b-10 u-p-t-10 u-text-left u-font-12 u-flex u-row-between"
      style="background:#ff4c4c;color:#fff;"
    >
      <div>天辉 {{ radiantWin ? "失败" : "胜利" }}</div>
      <div>
        杀敌 {{ getCountInListByKey(direPlayers, "kills") }} 金钱
        {{ getCountInListByKey(direPlayers, "gold_per_min") }} 经验
        {{ getCountInListByKey(direPlayers, "xp_per_min") }}
      </div>
    </div>
    <van-collapse v-model="activeNames">
      <van-collapse-item
        v-for="player in direPlayers"
        :key="player.player_slot"
        :name="player.player_slot"
        :is-link="false"
      >
        <template #title>
          <van-row align="center" justify="space-between">
            <van-col span="5">
              <div class="u-flex u-flex-col u-col-top u-row-center">
                <div class="u-flex u-flex-col u-col-top u-relative u-m-b-4">
                  <van-image
                    height="28"
                    width="48"
                    fit="cover"
                    :src="`${imageBaseUrl}${heroes[player.hero_id].img}`"
                  />
                  <div
                    class="u-absolute u-font-12 u-p-2"
                    style="background:#fff;top:0;right:0;opacity:.7;border-radius: 0 0 0 8px;"
                  >{{ player.level }}</div>
                </div>
                <van-tag type="primary">{{ formatRankTier(player.rank_tier) }}</van-tag>
              </div>
            </van-col>
            <van-col span="11">
              <div>
                <div class="u-line-1 u-text-left u-m-b-4">
                  <van-tag
                    class="u-m-r-2"
                    v-for="(item, index) in getTag(player.player_slot)"
                    :key="index"
                    :type="item.type"
                  >{{ item.name }}</van-tag>
                  <span class="u-type-primary u-font-12">{{ player.personaname || "匿名玩家" }}</span>
                </div>
                <van-row align="center" justify="space-between">
                  <van-col span="12">
                    <div class="u-flex u-flex-col u-col-top">
                      <div
                        class="u-font-10 u-m-b-4"
                      >参战：{{ !!player.teamfight_participation ? (player.teamfight_participation * 100).toFixed(1) + '%' : '-' }}</div>
                      <div
                        class="u-font-10"
                      >伤害： {{ getHeroDamageParticipation(player.hero_damage, true) }}%</div>
                    </div>
                  </van-col>
                  <van-col span="12">
                    <div class="u-flex u-flex-col u-col-bottom">
                      <div
                        class="u-font-12 u-m-b-4"
                      >{{ `${player.kills}/${player.deaths}/${player.assists}` }}</div>
                      <div class="u-font-10 u-tips-color">
                        KDA:{{
                          (
                            (player.kills + player.assists) /
                            (player.deaths || 1)
                          ).toFixed(1)
                        }}
                      </div>
                    </div>
                  </van-col>
                </van-row>
              </div>
            </van-col>
            <van-col span="2">
              <div class="u-flex u-flex-col u-row-center u-col-center">
                <div class="u-flex u-flex-col u-m-b-2">
                  <van-image
                    width="10"
                    height="12"
                    :src="
                      `https://www.opendota.com/assets/images/dota2/scepter_${player?.purchase?.abyssal_blade ? 1 : 0
                      }.png`
                    "
                  ></van-image>
                  <van-image
                    width="10"
                    height="8"
                    :src="
                      `https://www.opendota.com/assets/images/dota2/shard_${player?.purchase?.aghanims_shard ? 1 : 0
                      }.png`
                    "
                  ></van-image>
                </div>
                <van-image
                  class="u-m-r-2 u-m-b-2"
                  height="20"
                  width="20"
                  fit="cover"
                  round
                  :src="`${imageBaseUrl}${items[item_ids[player.item_neutral]]?.img}`"
                >
                  <template v-slot:error></template>
                </van-image>
              </div>
            </van-col>
            <van-col span="6">
              <div
                style="display: grid;grid-template-columns: repeat(3, 26px);grid-row-gap: 2px;grid-column-gap: 2px;"
              >
                <van-image
                  height="20"
                  width="26"
                  fit="cover"
                  v-for="item in [0, 1, 2, 3, 4, 5]"
                  :key="item"
                  :src="
                    `${imageBaseUrl}${items[item_ids[player[`item_${item}`]]]?.img
                    }`
                  "
                >
                  <template v-slot:error></template>
                </van-image>
              </div>
            </van-col>
          </van-row>
        </template>
        <div>
          <van-row class="u-m-b-8 u-font-12" align="center">
            <van-col span="8" class="u-flex u-row-left">英雄伤害:{{ player.hero_damage }}</van-col>
            <van-col span="8">总金钱:{{ player.net_worth }}</van-col>
            <van-col span="8" class="u-flex u-row-right">
              <div
                style="display: grid;grid-template-columns: repeat(3, 26px);grid-row-gap: 2px;grid-column-gap: 2px;"
              >
                <van-image
                  height="20"
                  width="26"
                  fit="cover"
                  v-for="item in [0, 1, 2]"
                  :key="item"
                  :src="
                    `${imageBaseUrl}${items[item_ids[player[`backpack_${item}`]]]?.img
                    }`
                  "
                >
                  <template v-slot:error></template>
                </van-image>
              </div>
            </van-col>
          </van-row>
          <van-row class="u-m-b-8 u-font-12" justify="space-between" align="center">
            <van-col span="8" class="u-flex u-row-left">GPM:{{ player.gold_per_min }}</van-col>
            <van-col span="8">建筑伤害:{{ player.tower_damage }}</van-col>
            <van-col
              span="8"
              class="u-flex u-row-right"
            >正补/反补:{{ player.last_hits }}/{{ player.denies }}</van-col>
          </van-row>
          <van-row class="u-m-b-8 u-font-12" justify="space-between" align="center">
            <van-col span="8" class="u-flex u-row-left">XPM:{{ player.xp_per_min }}</van-col>
            <van-col span="8">英雄治疗:{{ player.hero_healing }}</van-col>
            <van-col span="8" class="u-flex u-row-right">
              摧毁防御塔:{{
                player.tower_kills
              }}
            </van-col>
          </van-row>
          <div class="u-flex u-flex-wrap">
            <AbilityIcon
              v-for="(ability, index) in player.ability_upgrades_arr"
              :key="index"
              :index="index + 1"
              :ability="abilities[ability_ids[ability]]"
              :width="28"
              :height="28"
            ></AbilityIcon>
          </div>
        </div>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>
<script setup>
import heroes from "dotaconstants/build/heroes.json";
import ability_ids from "dotaconstants/build/ability_ids.json";
import abilities from "dotaconstants/build/abilities.json";
import item_ids from "dotaconstants/build/item_ids.json";
import items from "dotaconstants/build/items.json";
import { formatRankTier, isRadiant } from "@/utils/dotaHelper.js";
import { ref, defineProps, computed, watch } from "vue";
import AbilityIcon from "@/components/AbilityIcon/index";
import { getCountInListByKey } from "@/utils/index";
import { isWin, formatKillStreak, formatMultiKill } from "@/utils/dotaHelper";
const imageBaseUrl = ref("https://steamcdn-a.akamaihd.net");
const activeNames = ref([]);
const props = defineProps({
  matchInfo: {
    type: Object,
  }
});
const players = computed(() => props.matchInfo.players);
const radiantPlayers = ref([]);
const direPlayers = ref([]);
const radiantWin = computed(() => props.matchInfo.radiant_win);
watch(players, (val) => {
  radiantPlayers.value = val.filter((player) => {
    return isRadiant(player.player_slot);
  });
  direPlayers.value = val.filter((player) => {
    return !isRadiant(player.player_slot);
  });
  getStore(players);
});
const getMaxInListByKey = (list, key) => {
  let max = 0;
  let playerSlot;
  list.forEach((item) => {
    if (item[key] > max) {
      max = item[key];
      playerSlot = item.player_slot;
    }
  });
  return playerSlot;
};

const getMvpInList = (list, mvpType = true) => {
  let max = 0;
  let playerSlot;
  const _list = list.filter((item) => {
    return mvpType
      ? isWin(item.player_slot, item.radiant_win)
      : !isWin(item.player_slot, item.radiant_win);
  });
  _list.forEach((item) => {
    if (item.store > max) {
      max = item.store;
      playerSlot = item.player_slot;
    }
  });
  return playerSlot;
};
const storeList = [];
const killsList = []
const getStore = (players) => {
  // 分数
  players.value.forEach((player) => {
    player.store =
      player.kills * 5 +
      player.assists * 2 -
      player.deaths * 2 +
      player.tower_damage +
      player.hero_healing +
      player.hero_damage;
    // 连杀
    if (formatKillStreak(player.kill_streaks, player.player_slot)) {
      killsList.push(formatKillStreak(player.kill_streaks, player.player_slot));
    }
    // 多杀
    if (formatMultiKill(player.multi_kills, player.player_slot)) {
      killsList.push(formatMultiKill(player.multi_kills, player.player_slot));
    }
  });
  // MVP 胜利方 分数最高
  storeList.push({
    name: "mvp",
    type: "warning",
    playerSlot: getMvpInList(players.value, true),
  });
  // 魂 失败方 分数最高
  storeList.push({
    name: "魂",
    type: "primary",
    playerSlot: getMvpInList(players.value, false),
  });
  // kills 最多 破
  storeList.push({
    name: "破",
    type: "danger",
    playerSlot: getMaxInListByKey(players.value, "kills"),
  });
  // assists 最多 助
  storeList.push({
    name: "助",
    type: "primary",
    playerSlot: getMaxInListByKey(players.value, "assists"),
  });
  // deaths 最多 鬼
  storeList.push({
    name: "鬼",
    type: "danger",
    playerSlot: getMaxInListByKey(players.value, "deaths"),
  });
  // tower_damage 最多 军
  storeList.push({
    name: "军",
    type: "warning",
    playerSlot: getMaxInListByKey(players.value, "tower_damage"),
  });
  // hero_healing 最多 奶
  storeList.push({
    name: "奶",
    type: "success",
    playerSlot: getMaxInListByKey(players.value, "hero_healing"),
  });
  // hero_damage 最多 力
  storeList.push({
    name: "力",
    type: "danger",
    playerSlot: getMaxInListByKey(players.value, "hero_damage"),
  });
  // gold_spent 最多 富
  storeList.push({
    name: "富",
    type: "warning",
    playerSlot: getMaxInListByKey(players.value, "gold_spent"),
  });
  // pings 压力怪
  storeList.push({
    name: "压力怪",
    type: "danger",
    playerSlot: getMaxInListByKey(players.value, "pings"),
  });
};
// 获取标签
const getTag = (playerSlot) => {
  return storeList.filter((item) => {
    return item.playerSlot === playerSlot;
  });
};
// 获取伤害百分比
const getHeroDamageParticipation = (heroDamage, isRadiant) => {
  const playerInfo = isRadiant ? radiantPlayers.value : direPlayers.value
  let heroDamageTotal = 0
  playerInfo.forEach(player => {
    heroDamageTotal += player.hero_damage
  })
  return heroDamageTotal > 0 ? (heroDamage / heroDamageTotal * 100).toFixed(1) : 0
} 
</script>
<style lang="scss" scoped>
:deep(.van-cell),
:deep(.van-collapse-item__content) {
  padding: 4px 10px;
}
</style>
